<template>
	<div class="tableEmus">
		<div class="tableitem" v-if="launch">
			<div class="tableSetting" @click.stop="handleLaunch()">
				<el-tooltip class="box-item" effect="dark" :content="showMore?'关闭':'展开'" placement="bottom">
					<i-ep-operation color="#409EFF" />
				</el-tooltip>
			</div>
		</div>
	
	
		<div class="tableitem" v-if="refresh">
			<div class="tableSetting" @click="handleRefresh()">
				<el-tooltip class="box-item" effect="dark" content="刷新" placement="bottom">
					<i-ep-refresh color="#409EFF" />
				</el-tooltip>
			</div>
		</div>
		<div class="tableitem" v-if="columns">
			<el-popover placement="bottom" :visible="popVisible" width="230">
			  <template #reference>
				<div class="tableSetting" @click.stop="popVisible =!popVisible">
				 <el-tooltip class="box-item" effect="dark" content="自定义显示列" placement="bottom">
					<i-ep-setting color="#409EFF" />
				  </el-tooltip>
				</div>
			  </template>
			  <div class="otherCusBox"  @click.stop="''">
				  
				  <div class="clomTitle">
				  	列展示
				  </div>
				<el-checkbox-group v-model="TableFilter.tableGlobalLocalTemp[strtype+'_checklist']" class="checkbox-wrap">
					<div class="checkBoxItem" v-for="(item,index) in  TableFilter.tableGlobalLocalTemp[strtype+'_dropCol']" :key="index">
						<el-checkbox style="display: block" 
						  :label="item" :value="item"> 
							   {{item}} 
						</el-checkbox>
						<div class="checkBoxCz">
							<div class="el-icon-top" @click.stop="GotToCol(index,1)">
								<i-ep-top color="#333" />
							</div>
							<div class="el-icon-bottom" @click.stop="GotToCol(index,2)">
								<i-ep-bottom color="#333" />
							</div>
						</div>
					</div>
				</el-checkbox-group>
				<div class="btnBox">
				  <el-button @click="confirmBack" size="small" type="primary">确定</el-button>
				 
				 <el-popconfirm
					width="280"
					confirm-button-text="确定"
					cancel-button-text="取消"
					icon-color="#626AEF"
					title="即将退出系统，以便获取最新显示数据列名，确定退出吗？" 
					@confirm="cancelBack">
				    <template #reference>
						   <el-button  size="small" >重置</el-button>
				    </template>
				 </el-popconfirm>

				</div>
			  </div>
			</el-popover>
		</div>
	
	</div>
	

</template>

<script setup lang="ts">
	import { useTableFilterStore } from "@/store/modules/tableFilter";
	import _ from 'lodash-es'
	
	const props = defineProps({
		//数据列表索引值  例如 user ->对应着 vuex  == user_cxxxxx模块
	    strtype: {
	        type: String,
	        required: true,
	        default: ""
	    },
		showMore:{
			type:Boolean,
			default:false
		},
		//展开按钮
		launch:{
			type:Boolean,
			default:false
		},
		//刷新按钮
		refresh:{
			type:Boolean,
			default:true
		},
		//动态列
		columns:{
			type:Boolean,
			default:true
		}
	});
	const emit = defineEmits(['handleLaunch','handleRefresh']);
	
	const TableFilter:any = useTableFilterStore();
	const popVisible = ref<any>(false);
	const columnsTemp:any  =ref();
	const checklistTemp:any = ref();
	
	interface TableGlobalLocal {
	  [key: string]: any; // 或者更具体的类型
	}
	onMounted(()=>{
		console.log(props.strtype)

		
	})
	// const emit = defineEmits(["onCloseModule","onfunChange"]);
	function GotToCol(index:any,type:any){
		
		var dropColStr:string =props.strtype + '_dropCol';
		// var checklistStr:string = props.strtype + '_checklist';
		var dropCol =(TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr];
		var downTemp = dropCol[index];
		if(type == 1)
		{
			if(index == 0)
			{return false;}
			else
			{
				dropCol[index] = dropCol[index-1];  
				dropCol[index-1] = downTemp;  
			}
		}
		else
		{
			if(index >= dropCol.length-1)
			{return false;}
			else
			{
				dropCol[index] = dropCol[index+1];
				dropCol[index+1] = downTemp;  
			}
		}
	}
	function confirmBack(){
		var dropColStr:string =props.strtype + '_dropCol';
		var checklistStr:string = props.strtype + '_checklist';
		const tempDrop = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr];
		const tempCheck = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr];
		const newTempCheck=tempDrop.filter(column => tempCheck.includes(column));
		(TableFilter.tableGlobalLocal as TableGlobalLocal)[dropColStr]=_.cloneDeep(tempDrop);
		(TableFilter.tableGlobalLocal as TableGlobalLocal)[checklistStr]=_.cloneDeep(newTempCheck)
		onClickOutside();
		
	}
	
	function cancelBack(){
		
		console.log('需要重新退出才能生效')
		// const DefalutList= TableFilter[props.strtype+'_DefalutList'];
		// const DefalutSelect = TableFilter[props.strtype+'_DefalutSelect'];
		// TableFilter[props.strtype+'_columns']=_.cloneDeep(DefalutList);
		// TableFilter[props.strtype+'_checklist']	=_.cloneDeep(DefalutSelect);
		// TableFilter[props.strtype+'_columnsTemp'] =_.cloneDeep(DefalutList);
		// TableFilter[props.strtype+'_checklistTemp']	 =_.cloneDeep(DefalutSelect);
		// onClickOutside();
	}
	
	function onClickOutside() {
	  popVisible.value = false;
	}
	/**
	 * 点击展开 搜索条 按钮
	 */
	function handleLaunch(){
		console.log('展开')
		emit('handleLaunch');
	}
	/**
	 * 点击 刷新列表 数据按钮
	 */
	function handleRefresh(){
		emit('handleRefresh');
	}
	
	
	window.addEventListener('click', (e) => {
		onClickOutside();
	});
</script>

<style lang="scss">

	.tableEmus{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		height: 32px;
	}
	.tableitem{
		width: 32px;
		height: 32px;
		&:last-child{
			margin-right: 0;
		}
	}
	.tableSetting{
		width: 32px;
		height: 32px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box-item{
		
	}
	.clomTitle{
		padding: 10px 23px;
		clear: both;
		font-size: 14px;
	}
</style>